<template>
  <el-dialog :visible.sync="isVisible"
    append-to-body
    custom-class="account-merge-dialog dialog-offset"
    top="20vh"
    :showClose="!loading"
    :close-on-click-modal="false"
    width="518px"
    @closed="onDialogClose">
    <div class="text-center">
      <div class="d-title">选择保留账号</div>
      <div class="d-msg">检测到发生账号冲突，选择想要保留数据的账号，点击确定完成绑定</div>
      <div class="text-danger">注：未保留账号的相关数据将被删除（手机端同步删除）</div>
    </div>
    <div class="cont-wrap">
      <div class="c-title"></div>
      <div class="list">
        <div :class="{item:1,active:active===i}"
          v-for="(item,i) in list"
          :key="i"
          @click="active=i">
          <svg-icon iconClass="b-checked"
            class="item-check" />
          <div class="item-left">
            <svg-icon :iconClass="item.icon"
              :class="item.icon" />
          </div>
          <div class="item-right">
            <p class="item-title">{{item.label}}
              <svg-icon iconClass="vip-text"
                v-if="item.vip" />
            </p>
            <p class="item-info">{{item.id}}</p>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer"
      class="dialog-footer">
      <el-button type="primary"
        @click="confirm"
        size="small"
        :loading="loading">确 定</el-button>
      <el-button @click="cancel"
        size="small"
        :disabled="loading">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script type="text/javascript">
import { bindAuthMerge } from '@/api/login'
import { mapGetters } from 'vuex'
import mixins from './bind-mixins'
export default {
  name: 'BindMerge',
  mixins: [mixins],
  props: {
    visible: Boolean,
    // wx 绑定微信号 phone 绑定手机号 changePhone 手机号换绑
    fromBindType: {
      type: String,
      required: true
    },
    data: {
      type: Object,
      required: true,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      active: 0,
      loading: false
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'appInfo']),
    isVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    list () {
      const list = []
      const { current_user = {}, merge_user = {} } = this.data
      const cData = this.getTypeInfo(!this.userInfo.PhoneNumber)
      const mData = this.getTypeInfo(this.fromBindType === 'wx')
      list.push({
        icon: cData.icon,
        type: cData.type,
        label: '当前账号',
        typeLabel: cData.label + '账号',
        vip: current_user.is_vip,
        id: current_user.nick_name,
        user_id: current_user.user_id
      })
      list.push({
        icon: mData.icon,
        type: mData.type,
        label: mData.label + '账号',
        typeLabel: mData.label + '账号',
        vip: merge_user.is_vip,
        id: merge_user.nick_name,
        user_id: merge_user.user_id
      })
      return list
    }
  },
  watch: {
    isVisible (val) {
      if (val) {
        this.active = this.list.findIndex(item => item.vip) || 0
      }
    }
  },
  methods: {
    onDialogClose (val) {
      this.active = 0
    },
    /**
     * 确定
     * @param {String} val
     */
    getTypeInfo (isWechat) {
      if (isWechat) {
        return {
          icon: 'wechat',
          type: 'wx',
          label: '微信'
        }
      }
      return {
        icon: 'phone2',
        type: 'phone',
        label: '手机'
      }
    },
    confirm () {
      const data = this.list[this.active]
      const otherData = this.list[this.active === 0 ? 1 : 0]
      if (!data) return
      const obj = { iconClass: 'error' }
      let num
      if (!data.vip) {
        obj.dangerouslyUseHTMLString = true
        obj.message = `您选择保留的账号不是VIP账号<br/>建议您返回重新选择`
        obj.cancelButtonText = '返回重新选择'
        obj.confirmButtonText = '坚持删除VIP账号'
        num = 1788
        this.$xz('xz_substat_action', num)
      } else {
        obj.message = `确定保留${data.label}（${data.id}）数据，并删除${otherData.label}（${otherData.id}）数据吗？点击确定后将完成绑定`
        num = 1792
        this.$xz('xz_substat_action', num)
      }
      this.$xz('xz_substat_action', 1785)
      this.$PsMessageBox(obj).then(() => {
        this.merge(data)
        this.$xz('xz_substat_action', num + 1)
      }).catch(() => {
        this.$xz('xz_substat_action', num + 2)
      })
    },
    cancel () {
      this.isVisible = false
      this.$xz('xz_substat_action', 1786)
    },
    /**
     * 提交绑定
     * @param {Object} item
     */
    merge (item) {
      this.loading = true
      const auth_type = this.fromBindType === 'wx' ? 'wx' : 'phone'
      const params = {
        code: this.data.verify_code,
        choice_id: item.user_id,
        auth_type
      }
      bindAuthMerge(params).then(res => {
        const data = this.list[this.active === 0 ? 1 : 0]
        this.isVisible = false
        this.completeBind({ isAgainLogin: item.user_id !== this.data.current_user.user_id })
        this.$xz('xz_merge_user_info', data.user_id + '')
        this.$emit('completeBind')
      }).finally(e => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/theme/common/var";
.d-title {
  font-size: 18px;
  color: #fff;
}
.d-msg {
  line-height: 25px;
  margin: 18px 0 6px;
}
.cont-wrap {
  margin: 0 47px;
}
.c-title {
  font-size: 12px;
  margin: 17px 0 6px;
}
.list {
  display: flex;
  justify-content: space-between;
}
.item {
  width: 190px;
  height: 80px;
  border: 1px solid #707070;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  &:hover,
  &.active {
    border: 1px solid #00bbd7;
  }
  &.active {
    background: rgba($color: $--color-primary, $alpha: 0.1);
    .item-check {
      opacity: 1;
    }
  }
  display: flex;
  align-items: center;
  position: relative;
  transition: 0.35s;
  &-check {
    position: absolute;
    top: -1px;
    left: -1px;
    font-size: 44px;
    opacity: 0;
    transition: 0.35s;
  }
  &-left {
    width: 60px;
    padding-right: 10px;
    text-align: right;
    .svg-icon {
      font-size: 32px;
    }
  }
  &-right {
    flex: 1;
    overflow: hidden;
    line-height: 25px;
    padding-right: 15px;
  }
  &-title {
    color: #999999;
    .svg-icon {
      font-size: 26px;
      vertical-align: -0.26em;
      margin-left: 4px;
    }
  }
  &-info {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
  }
  .wechat {
    color: #08a74d;
  }
}
.dialog-footer {
  text-align: center;
  .el-button {
    width: 80px;
  }
}
.text-danger{
  color: $--color-danger;
}
</style>
<style lang="scss">
.account-merge-dialog {
  .el-dialog__body {
    padding: 0 0 27px;
  }
  .el-dialog__footer {
    padding: 0 0 35px;
  }
}
</style>
